<template>
  <div class="buynew-container">
    <div class="buynew-container-bazaar">
      <div class="header">
        <div class="logo">
          <span class="logo-icon">☷</span>
          <span>NDX100</span>
        </div>
        <div class="candlestick">🕯️</div>
      </div>

      <div class="tabs">
        <div v-for="(tab, index) in tradeTabs" :key="index" :class="['tab', activeTradeTab === index ? 'active' : '']"
          @click="activeTradeTab = index">
          {{ tab }}
        </div>
        <div class="price-display">{{ detail.nowPrice || 0 }}</div>
      </div>

      <div class="trading-section">
        <div class="trading-section-left">
          <div class="operation-item">
            <div class="operation-item-label">交易方式</div>
            <el-select v-model="value" placeholder="请选择">
              <el-option v-for="item in transactionOptions" :key="item.transactionOptionsValue" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="operation-item">
            <div class="operation-item-label">保證金(手)</div>
            <el-input-number @change="change" v-model="earnestMoney" :precision="2" :step="0.1" :min="0.01">
              <template slot="append">手</template>
            </el-input-number>
          </div>

          <div class="form-row">
            <div class="form-row-label">可用</div>
            <div class="form-row-value">{{ 0 }} USD</div>
          </div>

          <div class="form-row">
            <div class="form-row-label">價格</div>
            <div class="form-row-value">{{ detail.depositAmt }} USD/手</div>
          </div>

          <div class="form-row">
            <div class="form-row-label">額度</div>
            <div class="form-row-value">{{ this.limit }} USD</div>
          </div>

          <div class="form-row">
            <div class="form-row-label">手續費</div>
            <div class="form-row-value">{{ this.serviceCharge }} USD</div>
          </div>

          <button class="buy-button" @click="submitTrade">
            {{ tradeTabs[activeTradeTab] }} NDX100
          </button>
        </div>
        <div class="trading-section-right">
          <div class="price-list-header">
            <div class="price-label">价格</div>
            <div class="count-label">数量</div>
          </div>
          <div class="price-list">
            <div :class="['price-list-item', item.isRed ? 'price-list-item-red' : '']"
              v-for="(item, index) in priceList" :key="index">
              <div class="value">{{ item.price }}</div>
              <div class="volume" :style="{ '--width': item.width }">
                {{ item.volume }}
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <div class="buynew-container-warehouse">
      <el-tabs v-model="activePositionTab" @tab-click="getOrderHoldList">
        <el-tab-pane v-for="(tab, index) in positionTabs" :key="tab.name" :label="tab.label" :name="tab.name"
          class="buynew-container-warehouse-item">
          <div class="position" v-for="(position, index) in positions" :key="index">
            <div class="position-header">
              <div class="code">{{ position.code }}</div>
              <div class="control-buttons">
                <el-button class="btn" @click="openSettings(position)">設置</el-button>
                <el-popconfirm title="确认平仓？" @onCancel="onCancel" @onConfirm="handleSell">
                  <el-button class="btn yellow" slot="reference">平仓</el-button>
                </el-popconfirm>

              </div>
            </div>

            <div class="position-item">
              <div class="position-row">
                <div class="position-label">訂單號</div>
                <div class="position-label">利潤</div>
              </div>
              <div class="position-row">
                <div class="position-detail">{{ position.positionSn || '--' }}</div>
                <div :class="['position-detail', position.profitAndLose >= 0 ? 'profit' : 'loss']">
                  {{ position.profitAndLose >= 0 ? '+' : '' }}{{ position.profitAndLose }}
                </div>
              </div>
            </div>

            <div class="position-item">
              <div class="position-row">
                <div class="position-label">方向</div>
                <div class="position-label">手數</div>
                <div class="position-label">額度</div>
              </div>
              <div class="position-row">
                <div class="position-detail">{{ position.orderDirection || '--' }}</div>
                <div class="position-detail">×{{ position.hands || '--' }}</div>
                <div class="position-detail">{{ position.allDepositAmt || '--' }} USD</div>
              </div>
            </div>

            <div class="position-item">
              <div class="position-row">
                <div class="position-label">購買價格</div>
                <div class="position-label">止盈</div>
                <div class="position-label">止損</div>
              </div>
              <div class="position-row">
                <div class="position-detail">{{ position.buyOrderPrice || '--' }}</div>
                <div class="position-detail">{{ position.profitTargetPrice || '--' }}</div>
                <div class="position-detail">{{ position.stopTargetPrice || '--' }}</div>
              </div>
            </div>

            <div class="position-item">
              <div class="position-row">
                <div class="position-label">時價</div>
                <div class="position-label">買入時間</div>
                <div class="position-label">銷售時間</div>
              </div>
              <div class="position-row">
                <div class="position-detail">{{ position.nowPrice || '--' }}</div>
                <div class="position-detail">{{ position.buyOrderTime || '--' }}</div>
                <div class="position-detail">{{ position.sellOrderTime || '--' }}</div>
              </div>
            </div>
          </div>
          <!-- 
          <div class="no-more" v-if="positions.length > 0">沒有更多了</div>
          <div class="no-more" v-else>暫無持倉</div> -->
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import * as api from '@/axios/api'
import { Toast } from 'mint-ui'
export default {
  name: 'TradingPlatform',
  data() {
    return {
      transactionOptions: [{
        value: '1',
        label: '交易方式'
      }],
      transactionOptionsValue: '',
      tradeTabs: ['買漲', '買跌'],
      activeTradeTab: 0,
      positionTabs: [{ label: '持倉', name: "0" }, { label: '平倉', name: "1" }],
      activePositionTab: "0",
      earnestMoney: 0,

      priceList: [
        { price: 19260.68, volume: 8, width: "20%" },
        { price: 19260.30, volume: 8, width: "20%" },
        { price: 19259.91, volume: 5.3, width: "20%" },
        { price: 19259.14, volume: 4.1, width: "20%" },
        { price: 19258.76, volume: 1.8, width: "20%" },
        { price: 19281.40, volume: 1.8, width: "20%" },
        { price: 19257.60, volume: 1.6, width: "20%" },
        { price: 19257.22, volume: 3, width: "20%" },
        { price: 19256.64, volume: 8.8, width: "20%" },
        { price: 19256.45, volume: 3.2, isRed: true, width: "20%" },
        { price: 19256.06, volume: 6.8, isRed: true, width: "20%" }
      ],
      positions: [],
      closedPositions: [],
      detail: {}
    };
  },
  methods: {
    // 持仓记录
    async getOrderHoldList() {
      let handleFun = this.activePositionTab === "0"
        ? () => api.getOrderHoldList({ pageNum: 1, pageSize: 10 })
        : () => api.getOrderHistoryList({ pageNum: 1, pageSize: 10 });
      const res = await handleFun();
      this.positions = res.data.list || []
    },


    submitTrade() {

    },
    async openSettings(position) {
      const { id, profitTargetPrice, stopTargetPrice } = position || {};
      const res = await api.updateIndex({ id, profitTarget: profitTargetPrice, stopTarget: stopTargetPrice })
      if (res.status === 0) {
        this.$message('设置成功');
      }
    },

    async handleSell({ positionSn }) {
      const res = await api.sellIndex({ positionSn })
      if (res.status === 0) {
        this.$message('平仓成功');
      }
    },

    handleWarehouseChange() {
      getOrderHoldList()
    },

    onCancel() {
      console.log("取消")
    },

    async getTradeData() {
      let opts = {
        code: this.$route.params.code,
        stockType: this.$route.params.stockType
      };
      console.log(opts, 'opts');

      let data = await api.getTradeData(opts)
      if (data.status === 0) {
        this.detail = data.data;
      } else {
        Toast(data.msg)
      }
    },

    change(){
      console.log(this.earnestMoney)
    }
  },
  mounted() {
    this.getTradeData();
    this.getOrderHoldList();
  },
  computed:{
    limit(){
      return (this.detail.depositAmt || 0)  * this.earnestMoney
    },
    serviceCharge(){
      return (this.detail.transFee /100 || 0) * (this.detail.depositAmt  || 0)  * this.earnestMoney
    }
  }


};
</script>

<style lang="less" scoped>
.el-popover {
  aria-hidden: false !important;
}

.buynew-container {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 6px;

  .buynew-container-bazaar {
    background-color: #fff;
    padding: 10px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;


      .logo {
        display: flex;
        align-items: center;
      }

      .logo-icon {
        color: #0066cc;
        font-weight: bold;
        font-size: 16px;
        margin-right: 5px;
      }
    }

    .tabs {
      display: flex;
      margin-bottom: 15px;
      position: relative;

      .tab {
        padding: 8px 15px;
        cursor: pointer;
        border: 1px solid #ddd;
        background-color: white;
        min-width: 70px;
        text-align: center;
      }

      .tab.active {
        border-bottom: 3px solid #1aaa8a;
        color: #1aaa8a;
      }

      .price-display {
        position: absolute;
        text-align: right;
        color: #d14836;
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 15px;
        right: 20px;
      }
    }



    .trading-section {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      gap: 20px;

      &-left,
      &-right {
        flex: 1 1;
      }

      &-left {
        .operation-item {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-bottom: 12px;

          .el-input-number{
            width: 100%;
          }


          .operation-item-label {
            font-size: 14px;
            color: #666;
            padding: 0 5px;
          }
        }

        .form-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 10px;
          align-items: center;
          padding: 0 5px 0 10px;

          &-label {
            width: 60px;
            color: #666;
            font-size: 14px;
          }

          &-value {
            flex: 1;
            text-align: right;
            color: #1aaa8a;
          }

        }
      }

      &-right {
        .price-list-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          // padding: 0 5px;
        }

        .price-list {
          display: flex;
          flex-direction: column;
          width: 100%;

          .price-list-item {
            position: relative;
            height: 25px;
            line-height: 25px;
            padding: 0 5px;

            .value {
              position: absolute;
              left: 0;
              color: rgb(44, 163, 121);
            }

            .volume {
              height: 100%;
              width: 100%;
              text-align: right;
              position: relative;
              z-index: 10;

              &::before {
                content: "";
                background-color: #e8f5e9;
                height: 100%;
                position: absolute;
                right: 0;
                width: var(--width);
                z-index: -1;
              }
            }
          }

          .price-list-item-red {
            .value {
              color: #d14836;
            }

            .volume {
              &::before {
                content: "";
                background-color: #FEC7CA;
                height: 100%;
                position: absolute;
                right: 0;
                width: var(--width);
                z-index: -1;
              }
            }
          }
        }
      }
    }




    .buy-button {
      width: 100%;
      padding: 10px;
      background-color: #1aaa8a;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      margin: 10px 0;
      font-size: 16px;
    }
  }

  .buynew-container-warehouse {
    background-color: #fff;
    padding: 10px;

    .buynew-container-warehouse-item {

      .position {
        margin-top: 15px;
        margin-bottom: 12px;
        padding: 10px;
        background-color: #F6F6F6;
      }

      .position-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      .code {
        color: #1aaa8a;
        font-weight: bold;
        font-size: 16px;
      }

      .control-buttons {
        display: flex;
        gap: 10px;
      }

      .btn {
        padding: 5px 15px;
        background-color: #1aaa8a;
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }

      .btn.yellow {
        background-color: #f9a825;
      }

      .position-item {
        margin-bottom: 5px;

        .position-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;

          .position-label {
            width: 100px;

            &:nth-child(2) {
              text-align: center;
            }

            &:nth-last-child(1) {
              text-align: right;
            }
          }

          .position-detail {
            color: #666;
            font-size: 12px;
            width: 100px;

            &.profit {
              color: #1aaa8a;
            }

            &.loss {
              color: #d14836;
            }

            &:nth-child(2) {
              text-align: center;
            }

            &:nth-last-child(1) {
              text-align: right;
            }
          }
        }
      }


      .candlestick {
        color: #333;
        font-size: 18px;
        margin-left: 5px;
      }

      .no-more {
        text-align: center;
        color: #999;
        margin-top: 20px;
        padding: 10px;
      }
    }
  }


}
</style>